<template>
  <div>
    <a-layout v-if="!areaVisable">
      <a-layout-content style="background: #fff">
        <a-page-header>
          <template slot="extra">
            <a-tooltip>
              <template slot="title">刷新页面</template>
              <a-button @click="fetch(searchParams)">
                <a-icon type="reload" />
              </a-button>
            </a-tooltip>
            <a-button type="primary" @click="salemarketEdit()" v-has="'salemarket.create'">
              <a-icon type="plus" />添加
            </a-button>
          </template>
          <template slot="title">集市管理</template>
        </a-page-header>

        <div style="margin: 0 16px">
          <a-form-model layout="inline">
            <a-form-model-item>
              <a-select
                v-model="formInline.status"
                style="width: 120px"
                placeholder="请选择状态"
                allow-clear
                @change="queryForm"
              >
                <a-select-option :value="1">状态：有效</a-select-option>
                <a-select-option :value="0">状态：暂停</a-select-option>
              </a-select>
            </a-form-model-item>

            <a-form-model-item>
              <app-tree-select
                v-model="formInline.area_code_select"
                style="width: 220px"
                :code="$e.city"
                radio
                placeholder="请选择城市"
                @change="
                  (data) => {
                    formInline.area_code_right_like = undefined
                    if (!data) return
                    formInline.area_code_right_like = data.area_code
                    queryForm()
                  }
                "
              />
            </a-form-model-item>

            <a-form-model-item>
              <a-input-search
                v-model.trim="formInline.searchkey"
                placeholder="名称"
                style="width: 200px"
                allow-clear
                @search="queryForm"
              >
                <a-button
                  :disabled="
                    Object.values(formInline).every((item) => {
                      return !item
                    })
                  "
                  slot="enterButton"
                >查询</a-button>
              </a-input-search>

              <a-button
                :disabled="
                  Object.values(formInline).every((item) => {
                    return !item
                  })
                "
                @click="clear"
                icon="delete"
                style="margin-left: 18px"
              >清空</a-button>
            </a-form-model-item>
          </a-form-model>
        </div>

        <div style="margin: 10px 16px 0 16px">
          <!-- :scroll="{ x: calcTableWidth(columns) }" -->
          <salemarketTable
            :columns="columns"
            :data="data"
            :pagination="pagination"
            :loading="loading"
            @action="salemarketAction"
            @change="handleTableChange"
          />
        </div>
      </a-layout-content>

      <edit v-model="editVisible" :item="editItem" @change="fetch(searchParams)" />

      <show v-model="showVisible" :data="editItem" />
    </a-layout>

    <!-- <areaTable
			ref="areaTable"
			v-if="areaVisable"
			@handleTableStatus="handleTableStatus"
    />-->
  </div>
</template>

<script>
import salemarket from "@/api/salemarket"

export default {
  components: {
    salemarketTable: () => import("./table"),
    edit: () => import("./edit"),
    show: () => import("./show"),
    // areaTable: () => import("./components/area.vue"),
  },
  data () {
    return {
      editVisible: false,
      showVisible: false,
      areaVisable: false,
      editItem: undefined,

      //查询条件
      formInline: {
        status: undefined,
        area_code_right_like: undefined,
        area_code_select: undefined,
        searchkey: undefined,
      },

      //列表数据
      data: [],
      pagination: {
        current: 1,
        pageSize: 20,
        total: 0,
        totalPage: 0,
        showSizeChanger: true,
        // hideOnSinglePage: true,
        showTotal: (total) => `总 ${total} 条`,
      },
      loading: false,
      searchParams: undefined,
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
          // width: 200,
          align: "center",
          // fixed: "left",
          scopedSlots: { customRender: "id" },
        },
        {
          title: "市场名称",
          // dataIndex: "name",
          key: "name",
          // width: 120,
          sorter: false,
          ellipsis: true,
          align: "center",
          scopedSlots: {
            customRender: "name"
          },
        },
        // {
        // 	title: "省",
        // 	dataIndex: "province",
        // 	key: "province",
        // 	// width: 120,
        // 	sorter: false,
        // 	ellipsis: false,
        // 	align: "center",
        // 	scopedSlots: {},
        // },
        // {
        // 	title: "城市",
        // 	dataIndex: "city",
        // 	key: "city",
        // 	// width: 120,
        // 	sorter: false,
        // 	ellipsis: false,
        // 	align: "center",
        // 	scopedSlots: {},
        // },
        {
          title: "地址",
          // dataIndex: "address",
          key: "address",
          // width: 120,
          sorter: false,
          ellipsis: true,
          align: "center",
          scopedSlots: {
            customRender: "address",
          },
        },
        {
          // width: 120,
          align: "center",
          title: "描述",
        },
        {
          title: "状态",
          sorter: false,
          ellipsis: false,
          // width: 120,
          scopedSlots: {
            customRender: "status",
          },

          align: "center",
        },
        {
          // width: 120,
          title: "地理名称",
          // dataIndex: "area_name",
          key: "area_name", // 为了导出有数据
          align: "center",
          scopedSlots: { customRender: "area_name" },
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          align: "center",
          // fixed: "right",
          // width: 250,
          scopedSlots: { customRender: "action" },
        },
      ],
    }
  },
  mounted () {
    this.$emit("menu", "/salemarket/list")
    this.queryForm()
  },
  methods: {
    clear () {
      this.formInline = {
        status: undefined,
        area_code_right_like: undefined,
        area_code_select: undefined,
        searchkey: undefined,
      }
      this.queryForm()
    },
    calcTableWidth (columns) {
      let totalWidth = 0
      for (let i = 0, len = columns.length; i < len; i++) {
        if (columns[i].width) {
          totalWidth += columns[i].width
        } else {
          totalWidth += 120
        }
      }
      return totalWidth
    },
    handleTableStatus () {
      this.areaVisable = false
    },
    queryForm () {
      this.data = []
      this.pagination.current = 1
      this.handleTableChange(this.pagination, {}, {})
    },
    handleTableChange (pagination, filters, sorter) {
      let orderBy = ""
      if (
        sorter.field &&
        sorter.order &&
        sorter.field !== "" &&
        (sorter.order === "descend" || sorter.order === "ascend")
      ) {
        let tmp = sorter.field.split(".")
        orderBy += tmp[tmp.length - 1]
        if (sorter.order === "descend") {
          orderBy += " desc"
        }
      }
      if (orderBy) {
        this.formInline["order_by"] = orderBy
      }

      this.fetch({
        ...filters,
        ...this.formInline,

        pageSize: pagination.pageSize,
        page: pagination.current,
      })
    },
    async fetch (params = {}) {
      this.data = []
      this.loading = true
      this.searchParams = params
      await salemarket.query(params).then((response) => {
        if (response.code !== 1) {
          this.$message.warning(response.message)
          return
        }
        console.log("集市管理", response)

        if (response.page) {
          this.pagination.current = response.page["page"]
          this.pagination.pageSize = response.page["pageSize"]
          this.pagination.total = response.page["totalSize"]
          this.pagination.totalPage = response.page["totalPage"]
        }

        if (response.data && response.data.length > 0) {
          this.data = response.data
        }

        return
      })
      this.loading = false
    },
    deleteSalemarket ({ id }) {
      this.$modal.confirm({
        title: "提示",
        content: "确定删除吗？",
        okText: "确定",
        cancelText: "取消",
        centered: true,
        onOk: () => {
          salemarket.delete(id).then((response) => {
            if (response.code !== 1) {
              this.$message.error(response.message)
              return
            }
            this.$message.success(response.message)
            this.queryForm()
          })
        },
        onCancel: () => {
          this.$message.warning("删除取消了")
        },
      })
    },
    salemarketAction (type, item) {
      console.log(type, item)

      if (type === "delete") {
        this.deleteSalemarket(item)
        return
      }
      if (type === "area") {
        // this.areaVisable = true
        // this.$refs.areaTable.queryForm.market_id = item.id
        // setTimeout(() => {
        // 	this.$refs.areaTable.queryForm.market_id = item.id
        // }, 40)
        this.$router.push("/market/area/" + item.id)
        // 区域管理
        return
      }

      if (type == "edit") {
        this.salemarketEdit(item)
        return
      }

      this.editItem = item
      this.showVisible = true
    },
    salemarketEdit (item) {
      this.editItem = item
      this.editVisible = true
    },
  },
}
</script>

<style lang="less" type="text/less" scoped></style>
